import '@umijs/max';
import React, { useEffect, useState } from 'react';
import { Tabs } from 'antd';
import CodeHighlighting from '@/components/CodeHighlighting';
import {
  axiosExample,
  javaExample,
} from '@/pages/Interface/InterfaceInfoDetail/components/CodeTemplate';

export type Props = {
  interfaceInfo?: API.InterfaceInfoVO;
  errorCodeTab: () => void;
};

const SampleCodeTab: React.FC<Props> = (props) => {
  const { interfaceInfo, errorCodeTab } = props;
  const [javaCode, setJavaCode] = useState<string>('');
  const [axiosCode, setAxiosCode] = useState<string>('');

  const [sampleCodeActiveTabKey, setSampleCodeActiveTabKey] = useState<string>('javadoc');

  const buildSampleCode = () => {
    const url =
      (interfaceInfo?.host ? interfaceInfo.host : '') +
      (interfaceInfo?.url ? interfaceInfo.url : '');
    const method = interfaceInfo?.method;
    setJavaCode(javaExample(url, method));
    setAxiosCode(axiosExample(url, method));
  };

  const tabChangeHandle = (key: string) => {
    setSampleCodeActiveTabKey(key);
  };

  useEffect(() => {
    buildSampleCode();
  }, [interfaceInfo]);

  return (
    <>
      <Tabs
        defaultActiveKey="javadoc"
        centered
        onChange={tabChangeHandle}
        items={[
          {
            key: 'javadoc',
            label: 'java',
            children: <CodeHighlighting codeString={javaCode} language={'java'} />,
          },
          {
            key: 'javascript',
            label: 'axios',
            children: <CodeHighlighting codeString={axiosCode} language={sampleCodeActiveTabKey} />,
          },
        ]}
      />
    </>
  );
};
export default SampleCodeTab;
